<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>机床详情</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <style>
    img.machine-img {
        width: 100%;
        min-height: 300px;
        background-color: white;
        position: relative;
    }
    span.image-text {
        position: absolute;
        left: 2px;
        top: 2px;
        color: white;
        background-color: black;
        opacity: 0.5;
        font-size: 0.8em;
        display: none;
    }
    </style>
</head>

<body>
    <script type="text/html" id="machine-detail">
        <div>
            <img class="machine-img" src="
                {{if data.pic == ''}}
                    ../images/machine_default.jpg
                {{else}}
                    http://img.listome.com{{data.pic}}
                {{/if}}
            ">
            <span class="image-text">点击图片可修改</span>
        </div>
        <div class="content-block-title">机床详细信息</div>
        <div class="list-block">
            <ul>
                <li class="item-content">
                    <div class="item-inner">
                        <div class="item-title">机床编号</div>
                        <div class="item-after">{{data.sn}}</div>
                    </div>
                </li>
                <li class="item-content">
                    <div class="item-inner">
                        <div class="item-title">机床类型</div>
                        <div class="item-after">{{data.type}}</div>
                    </div>
                </li>
                <li class="item-content">
                    <div class="item-inner">
                        <div class="item-title">机床型号</div>
                        <div class="item-after">{{data.model}}</div>
                    </div>
                </li>
                <li class="item-content">
                    <div class="item-inner">
                        <div class="item-title">机床品牌</div>
                        <div class="item-after">{{data.brand}}</div>
                    </div>
                </li>
                <li class="item-content">
                    <div class="item-inner">
                        <div class="item-title">购入日期</div>
                        <div class="item-after">{{data.buy_date | getTimeStr:''}}</div>
                    </div>
                </li>
                <li class="item-content">
                    <div class="item-inner">
                        <div class="item-title">保养周期</div>
                        <div class="item-after">
                            {{if data.maintenance_cycle <= 0}}
                                无
                                {{else}}
                                每{{data.maintenance_cycle / 86400}}天一次
                            {{/if}}
                        </div>
                    </div>
                </li>
                <li class="item-content">
                    <div class="item-inner">
                        <div class="item-title">上次保养日期</div>
                        <div class="item-after">{{data.last_maintenance_date | getTimeStr:''}}</div>
                    </div>
                </li>
                <li class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">备注</div>
                        <div class="item-after no-permission">
                            {{if data.remark == ''}}
                                无
                            {{else}}
                                {{data.remark}}
                            {{/if}}
                        </div>
                        <div class="item-input has-permission" style="display: none;">
                            <input type="text" id="remark-input" placeholder="填写备注信息" value="{{data.remark}}">
                        </div>
                        <div class="item-after has-permission" style="display: none;">
                            <a href="#" class="button" id="btn-submit-remark">提交</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="content-block-title">机床故障</div>
        <div class="list-block">
            <ul>
                <li class="item-content item-link" id="menu-machine-alert">
                    <div class="item-inner">
                        <div class="item-title">查看机床故障</div>
                    </div>
                </li>
            </ul>
        </div>
    </script>
    <div class="content" id="content">
    </div>
    <script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <script type="text/javascript" src="../js/arttemplate.js?version=2016053101"></script>
    <script type="text/javascript" src="../js/common.js?version=2016053101"></script>
    <script type="text/javascript">
    //获取车间和机床的ID
    var workshopId = getUrlParam('workshopId');
    var machineId = getUrlParam('machineId');

    getMachineDetail(workshopId, machineId);

    //获取机床详情
    function getMachineDetail(workshopId, machineId) {
        $.ajax({
            type: 'GET',
            url: requestBaseUrl + 'iot/companies/workshops/' + workshopId + '/machines/' + machineId,
            headers: {
                'Authorization': 'Bearer ' + getToken()
            },
            success: function(response) {
                console.log('machine detail: ' + JSON.stringify(response));
                if (response.status == 10001) {
                    showMachineDetail(response.data);
                } else {
                    $.toast('获取机床详情出错' + response.status);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $.toast('获取机床详情出错' + jqXHR.status);
            }
        })
    }

    template.helper('getTimeStr', function(unixTime, format) {
        if(unixTime <= 0) {
            return '无';
        }
        var date = new Date(unixTime * 1000);
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hours = date.getHours();
        var min = date.getMinutes();
        return year + '-' + numberProcess(month) + '-' + numberProcess(day);
    });

    //显示机床详情
    function showMachineDetail(data) {
        var data = {
            data: data
        };
        var html = template('machine-detail', data);
        $('#content').html(html);
        addClickOperation();
        getPermission(workshopId, machineId);
    }
 
    //添加点击处理
    function addClickOperation() {
        //新建任务
        $('#menu-machine-alert').click(function() {
            window.location = 'machine_alert_records.html?id=' + machineId;
        });
    }

    //获取是否有机器管理权限，有权限的话则可以修改备注和机器图片
    function getPermission(workshopId, machineId) {
        $.ajax({
            type: 'GET',
            url: requestBaseUrl + 'iot/companies/workshops/' + workshopId + '/machines/' + machineId + '/manager/access',
            async: false,
            headers: {
                'Authorization': 'Bearer ' + getToken()
            },
            success: function(response) {
                console.log('get permission: ' + JSON.stringify(response));
                if(response.status == 10001) {
                    //有权限修改机器信息，点击图片可修改图片，也可修改备注信息
                    $('span.image-text').show();     
                    $('div.no-permission').hide();
                    $('div.has-permission').show();
                    //提交备注信息
                    $('#btn-submit-remark').click(function() {
                        var remarkContent = $('#remark-input').val();
                        if(remarkContent == '' || remarkContent.trim() == '') {
                            $.toast('请填写备注再提交');
                        }else{
                            //这里提交备注
                            submitRemark(remarkContent, workshopId, machineId);
                        }
                    })
                    //点击图片修改图片
                    $('img.machine-img').click(function() {
                        if (!Terminal.platform.android){
                            window.location.href = "#modify_machine_picture"; //iOS需要根据这个来判断是否修改图片
                        }
                        try {
                            var url = requestBaseUrl + 'iot/companies/workshops/' + workshopId + '/machines/' + machineId + '/info';
                            window.js_interface.modifyMachinePic(url);
                        } catch (e) {
                            //如果是android平台，则提示错误，iOS平台不提示
                            if (Terminal.platform.android){
                                $.alert('请在工厂宝APP上使用本功能，或者升级工厂宝APP到最新版本。', '提示');    
                            }
                        }
                    });
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log('get permission error: ' + textStatus);
            }
        })
    }

    //提交备注信息
    function submitRemark(remark, workshopId, machineId) {
        $.showPreloader();
        $.ajax({
            type: 'POST',
            url: requestBaseUrl + 'iot/companies/workshops/' + workshopId + '/machines/' + machineId + '/info',
            data: {
                remark: remark
            },
            ecntype: 'multipart/form-data',
            headers: {
                'Authorization': 'Bearer ' + getToken()
            },
            success: function(response) {
                $.hidePreloader();
                if(response.status == 10001) {
                    $.toast('修改备注信息成功');
                }else{
                    $.toast('修改备注信息失败');
                }
            },
            error: function(jqXHR) {
                $.hidePreloader();
                $.toast('修改备注信息失败' + jqXHR.status);
            }
        });
    }

    </script>
</body>

</html>
<!--
